<template>
  <div>
    <div class="shop_main">
      <el-table
        ref="multipleTable"
        :data="this.$store.state.cartData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column width="160">
          <template slot-scope="scope">
            <img
              :src="'http://106.15.179.105:3000/' + scope.row.productImg"
              alt=""
              style="width: 120px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" width="300">
        </el-table-column>
        <el-table-column prop="price" label="单价">
          <template slot-scope="scope"> {{ scope.row.price }}元 </template>
        </el-table-column>
        <el-table-column prop="num" label="数量">
          <template slot-scope="scope">
            <button class="btn">-</button>
            <input
              type="text"
              v-model="scope.row.num"
              style="width: 20px"
              @keydown.enter="upnum(scope.row.num, scope.row.productID, scope.row.maxNum)"
            />
            <button class="btn">+</button>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="小计">
          <template slot-scope="scope">
            <span style="color: #ff6700">{{ scope.row.money }}元</span>
          </template>
        </el-table-column>
        <el-table-column width="120" label="操作">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="160"
              v-model="scope.row.visible"
              trigger="click"
            >
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="delShop(scope.row.productID)"
                  >确定</el-button
                >
              </div>
              <span slot="reference" class="el-icon-error delIcon"></span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="shop_foot">
        <div class="card_left">
          <b @click="$router.push('/Ordeer')">继续购物</b>|共{{
            this.$store.state.allNum
          }}件商品，已选择{{ sum }}件商品
        </div>
        <div class="card_right">
          合计:{{ allPrice }}元
          <el-button type="info" disabled v-show="sum == 0">去结算</el-button>
          <el-button
            type="warning"
            v-show="sum !== 0"
            @click="$router.push('/confirmOrder')"
            >去结算</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shoppingCarts from "../../api/shoppingCartApi";
export default {
  data() {
    return {
      sum: 0,
      allPrice: 0,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.sum = 0;
      this.allPrice = 0;
      val.forEach((item) => {
        this.sum += item.num;
        this.allPrice += item.money;
      });
      this.$store.commit("setOrder", val);
    },
    async upnum(num, id, maxNum) {
      if (num > maxNum) {
        num = maxNum;
      }
      let { data: res } = await shoppingCarts.updateShoppingCart({
        user_id: this.$store.state.user_id,
        product_id: id,
        num: num,
      });
      console.log(res);
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
        loginApi.getShoppingCart({ user_id: this.$store.state.user_id }).then((res) => {
          if (res.data.code === "001") {
            this.$store.commit("setCartData", res.data.shoppingCartData);
          }
        });
      }
    },
    async delShop(id) {
      let { data: res } = await shoppingCarts.deleteShoppingCart({
        user_id: this.$store.state.user_id,
        product_id: id,
      });
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
        loginApi.getShoppingCart({ user_id: this.$store.state.user_id }).then((res) => {
          if (res.data.code === "001") {
            this.$store.commit("setCartData", res.data.shoppingCartData);
          }
        });
      }
    },
  },
};
</script>

<style scoped="scoped">
.shop_main {
  width: 1225px;
  min-height: 400px;
  margin: 0 auto;
}
.el-table {
  margin: 30px 0;
  font-size: 18px;
}
.btn {
  width: 15px;
}
.shop_foot {
  height: 40px;
  background-color: white;
  margin-bottom: 30px;
  padding: 0;
}
.card_left {
  float: left;
}
.card_right {
  float: right;
}
.card_right > button {
  width: 100px;
  height: 40px;
}
</style>
